<template>
  <div class="supply-area">
    <Titlebar title="人气专区" icon="fire" iconColor="red" />
    <v-container class="grid-box" fluid>
      <v-row dense>
        <v-col v-for="card in cards" :key="card.id" :cols="card.flex">
          <v-skeleton-loader
            v-if="card.publishStatus === 1"
            :loading="loading"
            height="200px"
            type="card"
          >
            <v-card>
              <v-img
                :src="card.albumPics.split(',')[0]"
                class="white--text align-end"
                gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
                height="200px"
                @click="
                  $router.push({ path: '/goods', query: { id: card.id } })
                "
              >
                <v-card-title
                  class="d-inline-block text-truncate"
                  style="max-width: 100%; font-size: 1rem"
                  v-text="card.name"
                ></v-card-title>
              </v-img>
              <v-card-actions>
                <span>￥{{ card.price }}</span>
                <v-spacer></v-spacer>

                <v-btn icon>
                  <v-icon>mdi-heart</v-icon>
                </v-btn>

                <v-btn icon>
                  <v-icon>mdi-share-variant</v-icon>
                </v-btn>
              </v-card-actions>
            </v-card>
          </v-skeleton-loader>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
import Titlebar from '@/components/Titlebar.vue';
import request from '@/request';

export default {
  components: {
    Titlebar
  },
  data() {
    return {
      loading: true,
      cards: [
        {
          title: '0',
          price: 0,
          albumPics: '',
          flex: 6
        },
        {
          title: '1',
          price: 0,
          albumPics: '',
          flex: 6
        },
        {
          title: '2',
          price: 0,
          albumPics: '',
          flex: 6
        },
        {
          title: '3',
          price: 0,
          albumPics: '',
          flex: 6
        }
      ]
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      request.get('/marketing/popular/list').then(resp => {
        resp.forEach(item => {
          item.flex = 6;
        });
        this.cards = resp.filter(each => each.publishStatus === 1);
        this.loading = false;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.grid-box {
  margin-top: -16px;
}
</style>
